<template>
  <div>
    <div class="head_title"> 地图范围坐标设置 </div>
    <div id="container" ref="container"></div>
    <div id="markerInfo" ref="markerInfo"></div>
    <div id="toolsDraw" ref="toolsDraw" v-show="isShowBtn">
      <a-button id="drawStart" icon="plus" class="btn_primary_color" style="margin-left: 10px;margin-right: 10px;">新建</a-button>
      <a-button id="drawEdit" icon="unordered-list" class="btn_normal_color" style="margin-left: 10px;margin-right: 10px;">编辑</a-button>
      <a-button id="drawPoint" icon="save" class="btn_normal_color" style="margin-left: 10px;margin-right: 10px;">保存</a-button>
    </div>
  </div>
</template>
  
<script>
// import { ref } from 'vue';
import { adbound } from '@/utils/map/MapAdBound.js'
import { adlabel } from '@/utils/map/MapAdLabel.js'
import { MapMark } from '@/utils/map/MapMark.js'
import { samplePoints, sampleLine } from '@/utils/map/MapSample.js'
import { ClusterBubble } from '@/utils/map//MapCluster.js'

export default {
  props: {
    lat: {
      //中心点纬度
      type: Number,
      required: false,
      default: 28.679932,
    },
    lng: {
      //中心点经度
      type: Number,
      required: false,
      default: 115.851456,
    },
    zoom: {
      //地图级别
      type: Number,
      required: false,
      default: 11,
    },
    dark: {
      //是否深色模式，默认false为浅色模式
      type: Boolean,
      required: false,
      default: false,
    },
    pitch: {
      //俯仰角，0为2D模式，其他值为3D模式
      type: Number,
      required: false,
      default: 0,
    },
    callback: {
      //父组件的回调函数，在initMap之后执行
      type: Boolean,
      required: false,
      default: false,
    },
    isShowBtn: {
      //是否展示按钮
      type: Boolean,
      required: true,
      default: true,
    }
  },
  data() {
    return {
      markPoints: {},
      apikey: 'OB4BZ-D4W3U-B7VVO-4PJWW-6TKDJ-WPB77',
      map: null, // 地图对象的引用
      mapconfig: {
        rotation: 0, //设置地图旋转角度
      },
      control: {
        // 三个基本控件对象的引用
        zoom: null,
        scale: null,
        rotation: null,
      },
      markerCluster: null, // 点聚合图层
      markerLayer: null, // 图形标记图层
      markerStyle: {
        // 图形标记样式
        defaultMk: null,
        whiteMk: null,
        blueMk: null,
        redMk: null,
        startMk: null,
        endMk: null,
      },
      labelLayer: null, // 文字标记图层
      labelStyle: {
        // 文本标记样式
        defaultTxt: null,
        whiteTxt: null,
      },
      drawLayer: null, // 绘制图层
      drawPolygon: null, // 多边形图层
      geo: [],
    }
  },
  mounted() {
    this.loadMap(this.apikey)
  },
  methods: {
    loadMap(key) {
      // 异步加载地图
      // var mapscript = document.createElement("script");
      // mapscript.type = "text/javascript";
      // mapscript.async = true;
      // mapscript.src = "https://map.qq.com/api/gljs?v=1.exp&libraries=visualization&key=" + key;
      // document.head.appendChild(mapscript);

      // mapscript.onload = () => {
      this.initMap()
      this.initStyles()
      // console.log("callback", this.$props.callback)
      if (this.$props.callback) {
        this.$emit('callback', this.map)
      }
      // };
    },
    initMap() {
      // 创建地图
      let mapstyle = 'style0'
      // console.log(this.$props);
      if (this.$props.dark) {
        mapstyle = 'style1'
      }

      this.map = new TMap.Map(this.$refs.container, {
        center: new TMap.LatLng(this.$props.lat, this.$props.lng),
        zoom: this.$props.zoom,
        mapStyleId: mapstyle,
        pitch: this.$props.pitch,
        rotation: this.mapconfig.rotation,
        baseMap: {
          type: 'vector',
          // features: ['base', 'building2d', 'building3d', 'point', 'label']
        },
      })

      this.control.zoom = this.map.getControl(TMap.constants.DEFAULT_CONTROL_ID.ZOOM)
      this.control.scale = this.map.getControl(TMap.constants.DEFAULT_CONTROL_ID.SCALE)
      this.control.rotation = this.map.getControl(TMap.constants.DEFAULT_CONTROL_ID.ROTATION)

      this.hideControl('zoom')
      this.hideControl('scale')
      this.hideControl('rotation')

      this.map.on('click', function (evt) {
        var lat = evt.latLng.getLat().toFixed(6)
        var lng = evt.latLng.getLng().toFixed(6)
        console.log('{lat: ' + lat + ', lng: ' + lng + '}')
      })
    },
    initStyles() {
      // 初始化各种样式
      this.markerStyle.defaultMk = new TMap.MarkerStyle({
        width: 20,
        height: 30,
        anchor: { x: 10, y: 30 },
      })

      this.markerStyle.startMk = new TMap.MarkerStyle({
        width: 25,
        height: 35,
        anchor: { x: 16, y: 32 },
        src: 'https://mapapi.qq.com/web/lbs/javascriptGL/demo/img/start.png',
      })

      this.markerStyle.endMk = new TMap.MarkerStyle({
        width: 25,
        height: 35,
        anchor: { x: 16, y: 32 },
        src: 'https://mapapi.qq.com/web/lbs/javascriptGL/demo/img/end.png',
      })

      this.labelStyle.defaultTxt = new TMap.LabelStyle({
        color: '#ffffff',
        strokeColor: '#000000',
        strokeWidth: 1,
        size: 20,
        offset: { x: 20, y: 20 },
        angle: 0,
        alignment: 'center',
        verticalAlignment: 'middle',
        rank: 999999,
      })
    },
    getMap() {
      // 返回地图对象用于自定义编程
      return this.map
    },
    setDark(isdark) {
      // 设置是否为深色主题
      let mapStyleId = 'style0'
      if (isdark) {
        mapStyleId = 'style1'
      }
      this.map.setMapStyleId(mapStyleId)
    },
    setZoom(lev) {
      // 设置比例 全省：8，全市：10
      this.map.setZoom(lev)
    },
    getZoom() {
      // 获取缩放级别
      return this.map.getZoom()
    },
    setMaxZoom(lev) {
      // 设置最大缩放级别
      this.map.setMaxZoom(lev)
    },
    setMinZoom(lev) {
      // 设置最小缩放级别
      this.map.setMinZoom(lev)
    },
    setBoundary(lat_sw, lng_sw, lat_ne, lng_ne) {
      // 设置矩形边界范围
      // 参数依次是 西南角纬度，西南角经度，东北角纬度，东北角经度
      this.map.setBoundary(new TMap.LatLngBounds(new TMap.LatLng(lat_sw, lng_sw), new TMap.LatLng(lat_ne, lng_ne)))
    },
    setCenter(lat, lng) {
      // 设置地图中心点
      this.map.setCenter({ lat: lat, lng: lng })
    },
    showControl(cid) {
      // 显示基础控件
      // zoom  缩放加减
      // scale 比例尺
      // rotation 旋转
      if (cid == 'zoom') {
        this.map.addControl(this.control.zoom)
      } else if (cid == 'scale') {
        this.map.addControl(this.control.scale)
      } else if (cid == 'rotation') {
        this.map.addControl(this.control.rotation)
      } else {
        console.log('未知控件类型', cid)
      }
    },
    hideControl(cid) {
      // 隐藏基础控件
      // zoom  缩放加减
      // scale 比例尺
      // rotation 旋转
      if (cid == 'zoom') {
        this.map.removeControl(TMap.constants.DEFAULT_CONTROL_ID.ZOOM)
      } else if (cid == 'scale') {
        this.map.removeControl(TMap.constants.DEFAULT_CONTROL_ID.SCALE)
      } else if (cid == 'rotation') {
        this.map.removeControl(TMap.constants.DEFAULT_CONTROL_ID.ROTATION)
      } else {
        console.log('未知控件类型', cid)
      }
    },
    setBaseMap(baseMap) {
      // 修改地图类型
      // vector 矢量图，默认, 道路及底面（base）、建筑物（building3d）、建筑物平面(building2d)、poi文字（point）、道路文字（label）、道路箭头（arrow）
      // satellite 卫星图, 卫星影像图（base）、路网图（road）
      // traffic 路况图, 路况线网（base）、流动粒子（flow）
      // e.g. baseMap: { type: 'vector',	features: ['base', 'building2d', 'building3d', 'point', 'label']  }
      this.map.setBaseMap(baseMap)
    },
    addMarker(points) {
      // 增加点标记（不聚合）
      let geoPoints = []
      if (points == null) {
        points = samplePoints
      }
      for (let x = 0; x < points.length; x++) {
        let item = points[x]
        let poi = {
          id: item.id,
          position: new TMap.LatLng(item.lat, item.lng),
          properties: {
            title: item.title,
            addr: item.addr,
            tel: item.tel,
            time: item.time,
            img: item.img,
          },
        }
        geoPoints.push(poi)
      }

      this.markerLayer = new TMap.MultiMarker({
        map: this.map,
        styles: {
          default: this.markerStyle.defaultMk,
        },
        geometries: geoPoints,
      })
      this.markerLayer.on('click', this.warningMarkerClick)
      // this.markerLayer.on('click', this.MarkerClick)
    },
    // 预警信息格式化字段
    warningMarkerClick(res) {
      var res = res && res.geometry
      if (res) {
        this.$refs.markerInfo.style.display = 'block'
        console.log('res.properties', res.properties)
        this.$refs.markerInfo.innerHTML =
          '时间：' +
          res.properties.time +
          '<br/> 地址：' +
          res.properties.addr +
          '<br/> 图片：' +
          res.properties.img
      }
    },
    addMarkerCluster(points) {
      // 增加点标记（聚合）
      let geoPoints = []
      if (points == null) {
        points = samplePoints
      }
      for (let x = 0; x < points.length; x++) {
        let item = points[x]
        let poi = {
          id: item.id,
          position: new TMap.LatLng(item.lat, item.lng),
          properties: {
            title: item.title,
            addr: item.addr,
            tel: item.tel,
          },
        }
        geoPoints.push(poi)
      }

      this.markerCluster = new TMap.MarkerCluster({
        id: 'cluster',
        map: this.map,
        enableDefaultStyle: false, // 关闭默认样式
        minimumClusterSize: 2,
        geometries: geoPoints,
        zoomOnClick: true,
        gridSize: 60,
        averageCenter: false,
      })

      let clusterBubbleList = []
      let markerGeometries = []

      // 监听聚合簇变化
      let _this = this
      this.markerCluster.on('cluster_changed', function (e) {
        // 销毁旧聚合簇生成的覆盖物
        if (clusterBubbleList.length) {
          clusterBubbleList.forEach(function (item) {
            item.destroy()
          })
          clusterBubbleList = []
        }
        markerGeometries = []

        // 根据新的聚合簇数组生成新的覆盖物和点标记图层
        var clusters = _this.markerCluster.getClusters()
        clusters.forEach(function (item) {
          if (item.geometries.length > 1) {
            let clusterBubble = new ClusterBubble({
              map: _this.map,
              position: item.center,
              content: item.geometries.length,
            })

            clusterBubble.on('click', () => {
              _this.map.fitBounds(item.bounds)
            })
            clusterBubbleList.push(clusterBubble)
          } else {
            // console.log(item)
            markerGeometries.push({
              id: item.geometries[0].id,
              content: item.geometries[0].content,
              position: item.geometries[0].position,
              properties: item.geometries[0].properties,
            })
          }
        })

        if (_this.markerLayer) {
          // 已创建过点标记图层，直接更新数据
          _this.markerLayer.setGeometries(markerGeometries)
        } else {
          // 创建点标记图层
          _this.markerLayer = new TMap.MultiMarker({
            map: _this.map,
            styles: {
              default: _this.markerStyle.defaultMk,
            },
            geometries: markerGeometries,
          })
          _this.markerLayer.on('click', _this.markerClick)
        }
      })
    },
    markerClick(res) {
      var res = res && res.geometry
      if (res) {
        this.$refs.markerInfo.style.display = 'block'
        this.$refs.markerInfo.innerHTML =
          'markerid：' +
          res.id +
          '; 名称：' +
          res.properties.title +
          '; 地址：' +
          res.properties.addr +
          '; 电话：' +
          res.properties.tel +
          '; 坐标：' +
          res.position.lat +
          ',' +
          res.position.lng
      }
    },
    showBound(boundOption) {
      //显示区域边界，默认显示南昌市，边框8，高亮

      //参数预处理
      if (boundOption == null) {
        boundOption = {
          adid: null,
          width: null,
          highlight: null,
        }
      }

      let adid = boundOption.adid
      let bWidth = boundOption.width
      let isHighlight = boundOption.highlight

      if (adid == null) {
        adid = '360100'
      }

      if (bWidth == null || bWidth < 1 || bWidth > 10) {
        bWidth = 8
      }

      if (isHighlight == null) {
        isHighlight = true
      }
      // 参数预处理完成

      let paths = []
      let bound = adbound['ad_' + adid]
      if (bound != null) {
        paths.push(bound)
      }

      if (adid == 'all') {
        // 360100	南昌市
        // 360102	东湖区
        // 360103	西湖区
        // 360104	青云谱区
        // 360111	青山湖区
        // 360112	新建区
        // 360113	红谷滩区
        // 360121	南昌县
        // 360123	安义县
        // 360124	进贤县
        paths.push(adbound.ad_360100)
        paths.push(adbound.ad_360102)
        paths.push(adbound.ad_360103)
        paths.push(adbound.ad_360104)
        paths.push(adbound.ad_360111)
        paths.push(adbound.ad_360112)
        paths.push(adbound.ad_360113)
        paths.push(adbound.ad_360121)
        paths.push(adbound.ad_360123)
        paths.push(adbound.ad_360124)
      }

      if (isHighlight) {
        this.map.enableAreaHighlight({
          paths: paths,
          highlightColor: 'rgba(0,0,0,0)', // 高亮颜色
          //shadeColor: 'rgba(4,8,14,1)', // 其余阴影部分
        })
      }
      // console.log(paths)

      // MultiPolyline文档地址：https://lbs.qq.com/javascript_gl/doc/multiPolylineOptions.html
      new TMap.MultiPolyline({
        map: this.map,
        styles: {
          polyline: new TMap.PolylineStyle({
            color: '#017cf7', // 线条填充色，
            width: bWidth,
            lineCap: 'round',
            enableBloom: true, // 是否启用泛光  注：为true才会有效果
          }),
        },
        geometries: [
          {
            styleId: 'polyline', // 样式id
            paths: paths,
          },
        ],
      })
    },
    showAreaColor() {
      let that = this
      // 显示区域范围色块
      var paths = []
      paths.push(this.createAreaPlane(adbound.ad_360102, 360102))
      paths.push(this.createAreaPlane(adbound.ad_360103, 360103))
      paths.push(this.createAreaPlane(adbound.ad_360104, 360104))
      paths.push(this.createAreaPlane(adbound.ad_360111, 360111))
      paths.push(this.createAreaPlane(adbound.ad_360112, 360112))
      paths.push(this.createAreaPlane(adbound.ad_360113, 360113))
      paths.push(this.createAreaPlane(adbound.ad_360121, 360121))
      paths.push(this.createAreaPlane(adbound.ad_360123, 360123))
      paths.push(this.createAreaPlane(adbound.ad_360124, 360124))
      // console.log(paths);

      let area = new TMap.visualization.Area({
        styles: {
          defaultBg: {
            fillColor: 'rgba(56,124,234,0.7)', //设置区域填充颜色
            strokeColor: '#6799EA', //设置区域边线颜色
            strokeWidth: 1,
          },
        },
        selectOptions: {
          //设置拾取配置
          action: 'click',
          enableHighlight: false,
          style: {
            fillColor: 'rgba(64, 213, 255, 0.6)', //设置区域填充颜色
            strokeColor: '#20F0E9', //设置区域边线颜色
            strokeWidth: 4, //区域边线宽度
            strokeDashArray: [0, 0], //边线虚线展示方式
          },
        },
      })
        .setData(paths)
        .addTo(this.map)

      area.on('click', function (evt) {
        console.log(evt, '点击事件2')
        // 防止点到外面去
        if (evt.detail.area != null) {
          let styleId = evt.detail.area.styleId
          var arr = Object.keys(that.markPoints)
          if (arr.length != 0) {
            let temp = that.markPoints.geometries
            temp.forEach((item, index) => {
              if (item.id == styleId) {
                // 更新坐标样式
                that.markPoints.updateGeometries([
                  {
                    styleId: 'marker2', //更新样式id
                    id: item.id, //指定需要更新的点标记的id
                    position: item.position, //更新位置
                    lng: item.lng,
                    properties: item.properties,
                    content: item.content,
                  },
                ])
              } else {
                that.markPoints.updateGeometries([
                  {
                    styleId: 'marker1', //更新样式id
                    id: item.id, //指定需要更新的点标记的id
                    position: item.position, //更新位置
                    lng: item.lng,
                    properties: item.properties,
                    content: item.content,
                  },
                ])
              }
            })
          }
        } else {
          var arr = Object.keys(that.markPoints)
          if (arr.length != 0) {
            let temp = that.markPoints.geometries
            temp.forEach((item, index) => {
              // 更新坐标样式
              that.markPoints.updateGeometries([
                {
                  styleId: 'marker1', //更新样式id
                  id: item.id, //指定需要更新的点标记的id
                  position: item.position, //更新位置
                  lng: item.lng,
                  properties: item.properties,
                  content: item.content,
                },
              ])
            })
          }
        }
      })
    },
    createAreaPlane(points, id) {
      // 私有方法，点位转数组
      let path = []
      for (let x = 0; x < points.length; x++) {
        path.push(points[x].lat)
        path.push(points[x].lng)
      }

      let item = {}
      item.path = path
      item.styleId = id
      return item
    },
    showAreaLabel() {
      // 显示行政区划名称的文本标记
      let geopoints = []
      // 标记地址带图标
      let markPoints = []
      for (let x = 0; x < adlabel.length; x++) {
        let point = {}
        point.id = 'txt' + adlabel[x].id
        // point.content = adlabel[x].name;
        point.content = ' '
        point.position = new TMap.LatLng(adlabel[x].lat, adlabel[x].lng)
        point.styleId = 'label'
        geopoints.push(point)

        // 标记地址带图标
        let item = {}
        item.id = adlabel[x].id
        item.lng = adlabel[x].lng
        item.position = new TMap.LatLng(adlabel[x].lat, adlabel[x].lng)
        item.styleId = 'marker1'
        item.properties = { title: adlabel[x].name }
        item.content = adlabel[x].name
        markPoints.push(item)
      }

      // this.labelLayer = new TMap.MultiLabel({
      //   id: "adLabels-layer",
      //   styles: {
      //     label: this.labelStyle.defaultTxt,
      //   },
      //   map: this.map,
      //   geometries: geopoints,
      // });
      // 标记地址带图标
      this.markPoints = new TMap.MultiMarker({
        map: this.map, //指定地图容器
        styles: {
          // 点标记样式
          marker1: new TMap.MarkerStyle({
            width: 70, // 样式宽
            height: 70, // 样式高
            // anchor: { x: 16, y: 32 }, // 描点位置
            src: MapMark[0],
            color: '#FFFFFF',
            size: 13,
            offset: { x: 5, y: -20 },
          }),
          marker2: new TMap.MarkerStyle({
            width: 100, // 样式宽
            height: 100, // 样式高
            // anchor: { x: 16, y: 32 }, // 描点位置
            src: MapMark[1],
            color: '#FFFFFF',
            size: 20,
            offset: { x: 5, y: -32 },
          }),
        },
        // 点标记数据数组
        geometries: markPoints,
      })
    },
    addLine(points) {
      let path = []
      if (points == null) {
        points = sampleLine
      }

      for (let x = 0; x < points.length; x++) {
        let item = points[x]
        let poi = new TMap.LatLng(item.lat, item.lng)
        path.push(poi)
      }

      var polylineLayer = new TMap.MultiPolyline({
        map: this.map, // 绘制到目标地图
        // 折线样式定义
        styles: {
          style_blue: new TMap.PolylineStyle({
            color: '#3777FF', // 线填充色
            width: 8, // 折线宽度
            borderWidth: 2, // 边线宽度
            borderColor: '#FFF', // 边线颜色
            lineCap: 'round', // 线端头方式, butt 开口，square 闭口，round 圆润
            showArrow: false, // 是否显示箭头，width>6 才用
            eraseColor: 'rgba(190,188,188,1)',
          }),
        },
        geometries: [
          {
            id: 'line1',
            styleId: 'style_blue',
            paths: path,
          },
        ],
      })
    },
    addSharp(points) {
      let path = []
      if (points == null) {
        points = sampleLine
      }

      for (let x = 0; x < points.length; x++) {
        let item = points[x]
        let poi = new TMap.LatLng(item.lat, item.lng)
        path.push(poi)
      }

      var polygon = new TMap.MultiPolygon({
        map: this.map, // 绘制到目标地图
        styles: {
          polygon: new TMap.ExtrudablePolygonStyle({
            color: 'rgba(0,125,255,0.9)', //面填充色
            showBorder: true, //是否显示拔起面的边线
            extrudeHeight: 30, //多边形拔起高度
            borderColor: 'rgba(0,125,255,1)', //边线颜色
          }),
        },
        geometries: [
          {
            id: 'polygon1',
            styleId: 'polygon',
            paths: path,
          },
        ],
      })
    },
    addTrace(points) {
      // 增加折线行动轨迹
      let path = []
      if (points == null) {
        points = sampleLine
      }

      for (let x = 0; x < points.length; x++) {
        let item = points[x]
        let poi = new TMap.LatLng(item.lat, item.lng)
        path.push(poi)
      }

      var polylineLayer = new TMap.MultiPolyline({
        map: this.map, // 绘制到目标地图
        // 折线样式定义
        styles: {
          style_blue: new TMap.PolylineStyle({
            color: '#3777FF', // 线填充色
            width: 4, // 折线宽度
            borderWidth: 2, // 边线宽度
            borderColor: '#FFF', // 边线颜色
            lineCap: 'round', // 线端头方式
            eraseColor: 'rgba(190,188,188,1)',
          }),
        },
        geometries: [
          {
            id: 'erasePath',
            styleId: 'style_blue',
            paths: path,
          },
        ],
      })

      var marker = new TMap.MultiMarker({
        map: this.map,
        styles: {
          human: this.markerStyle.defaultMk,
          start: this.markerStyle.startMk,
          end: this.markerStyle.endMk,
        },
        geometries: [
          {
            id: 'human',
            styleId: 'human',
            position: path[0],
          },
          {
            id: 'start',
            styleId: 'start',
            position: path[0],
          },
          {
            id: 'end',
            styleId: 'end',
            position: path[path.length - 1],
          },
        ],
      })

      // 使用marker 移动接口， https://lbs.qq.com/webApi/javascriptGL/glDoc/glDocMarker
      marker.moveAlong({
        human: {
          path,
          duration: 10000,
          speed: 800,
        },
      })

      marker.on('moving', (e) => {
        var passedLatLngs = e.human && e.human.passedLatLngs
        if (passedLatLngs) {
          // 使用路线擦除接口 eraseTo, https://lbs.qq.com/webApi/javascriptGL/glDoc/glDocVector
          polylineLayer.eraseTo('erasePath', passedLatLngs.length - 1, passedLatLngs[passedLatLngs.length - 1])
        }
      })
    },
    addDialog() {
      // 增加信息窗体
      var infowindow = new TMap.InfoWindow({
        content: "<div><img src='assets/logo.png'><p>Hello World!</p></div>", //在content中直接传入html代码
        position: new TMap.LatLng(28.64278, 115.916861), //设置显示信息窗口的坐标
        map: this.map, //指定信息窗体显示在哪张地图上
        offset: { x: 0, y: -10 },
      })
      infowindow.open()
    },
    showDraw() {
      // 显示多边形绘制功能
      this.drawPolygon = new TMap.MultiPolygon({ map: this.map })
      if (this.isShowBtn) {
        document.getElementById('toolsDraw').style.display = 'block'
      }


      document.getElementById('drawStart').addEventListener('click', (e) => {
        if (this.drawLayer) {
          this.drawLayer.setSelectable(false)
          this.drawLayer.destroy()
        }
        // 开始绘制
        this.drawLayer = new TMap.tools.GeometryEditor({
          map: this.map,
          overlayList: [{ overlay: this.drawPolygon, id: 'polygon' }],
          actionMode: TMap.tools.constants.EDITOR_ACTION.DRAW,
          activeOverlayId: 'polygon',
          snappable: true,
        })
        // 多边形图层清空
        this.drawPolygon.setGeometries([])
        // 监听绘制完成事件
        this.drawLayer.on('draw_complete', () => {
          // 绘制完一次就进入编辑状态
          this.drawLayer.setActionMode(TMap.tools.constants.EDITOR_ACTION.INTERACT)
          this.drawLayer.setSelectable(true)
        })
      })

      document.getElementById('drawEdit').addEventListener('click', (e) => {
        // 开始编辑模式
        this.drawLayer.setActionMode(TMap.tools.constants.EDITOR_ACTION.INTERACT)
        this.drawLayer.setSelectable(true)
      })

      document.getElementById('drawPoint').addEventListener('click', (e) => {
        let areas = [] // 二维数组，可多个区域
        // 改为不可编辑模式
        this.drawLayer.setActionMode(TMap.tools.constants.EDITOR_ACTION.INTERACT)
        this.drawLayer.setSelectable(false)
        if (this.drawPolygon.geometries != null && this.drawPolygon.geometries.length > 0) {
          for (let r = 0; r < this.drawPolygon.geometries.length; r++) {
            let points = []
            for (let x = 0; x < this.drawPolygon.geometries[r].paths.length; x++) {
              let item = this.drawPolygon.geometries[r].paths[x]
              points.push({ lat: item.lat, lng: item.lng })
            }
            areas.push(points)
          }
          console.log(areas)
          console.log(this.drawPolygon.geometries)
          this.$emit('confirm', this.drawPolygon)
          // console.log(this.drawPolygon.geometries[0].paths);
        } else {
          console.log('没有绘制图形')
        }
      })
    },
  },
}
</script>
<style>
#container {
  width: 100%;
  height: 100%;
  overflow: hidden;
  margin-top: 20px;
}

.clusterBubble {
  border-radius: 50%;
  color: #fff;
  font-weight: 1500;
  font-size: 24px;
  text-align: center;
  opacity: 0.88;
  /* background-color: #f78c00; */
  /* border: 1px #fffb00 solid; */
  background-image: radial-gradient(#f79c00 0%, #ffe0aa 200%);
  box-shadow: 0px 3px 3px 0px rgba(255, 233, 32, 0.5);
  position: absolute;
  top: 0px;
  left: 0px;
}

#markerInfo {
  display: none;
  position: absolute;
  left: 30px;
  top: 90px;
  background: #fff;
  border-radius: 5px;
  padding: 10px;
  z-index: 9999;
}

#toolsDraw {
  position: absolute;
  top: -5px;
  margin: auto;
  width: 400px;
  z-index: 1001;
  display: none;
  right: -80px;
}

.toolItem {
  width: 200px;
  height: 24px;
  float: left;
  margin: 1px;
  padding: 4px;
  background: #ffffff;
  border-radius: 3px;
  text-align: center;
  font-size: 16px;
}

.head_title {
  font-size: 16px;
  font-family: "PingFang-SC-Heavy";
  color: #2C2C2C;
}
.operate_add_btn {
  margin-left: 10px;
  margin-right: 10px;
  background: #0072C6;
  border-radius: 5px;
  color: #fff;
  font-size: 16px;
  font-family: Source Han Sans CN;
  font-weight: 500;

}
.operate_add_btn:hover,
.operate_add_btn:focus {
  background-color: #0072C6;
  opacity: 0.8;
  color: #fff;
  border: 2px solid #0072C6;
}

.operate_edit_btn {
  margin-left: 10px;
  margin-right: 10px;
  font-size: 16px;
  font-family: Source Han Sans CN;
  font-weight: 500;
}
.operate_save_btn {
  margin-left: 10px;
  margin-right: 10px;
  font-size: 16px;
  font-family: Source Han Sans CN;
  font-weight: 500;
}

</style>
